<template>

  <div>
    <h1>员工信息管理</h1>
    <hr>
    <el-dialog title="授权信息" :visible.sync="grantFormVisible">
      <template>
        <div>
          <el-checkbox-group v-model="checkboxGroup1">
            <el-checkbox-button v-for="role in roleUserList" :label="role.name" :key="role.id">
              {{role.name}}
            </el-checkbox-button>
          </el-checkbox-group>
          <el-button @click="grantFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitGrant">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-button type="primary" plain @click="addUser">新增</el-button>
    <div class="block">
      <el-dialog title="修改信息" :visible.sync="updateFormVisible">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
          <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
            <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
            <el-input v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色" :label-width="formLabelWidth">
            <el-input v-model="ruleForm.role" autocomplete="off"></el-input>
          </el-form-item>
          <el-select v-model="ruleForm.role" placeholder="请选择">
            <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="ruleForm.gender" placeholder="请选择">
              <el-option label="男" value="man"></el-option>
              <el-option label="女" value="woman"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="ruleForm.phoneNumber" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEditForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="block">
      <el-dialog title="新增" :visible.sync="insertFormVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
            <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
            <el-input v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色" :label-width="formLabelWidth">
            <el-select v-model="ruleForm.role" placeholder="请选择角色">
              <el-option
                  v-for="item in roleList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="ruleForm.gender" placeholder="请选择">
              <el-option label="男" value="man"></el-option>
              <el-option label="女" value="woman"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="ruleForm.phoneNumber" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="insertFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitAddUser">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column
          type="index"
          label="序号"
          width="60">
      </el-table-column>
      <el-table-column
          prop="username"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="电话">
      </el-table-column>
      <el-table-column
          prop="gmtCreate"
          label="创建时间">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <!--        <el-button icon="el-icon-search" circle></el-button>-->
          <el-button type="primary" icon="el-icon-edit" circle @click="editUser(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteUser(scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-s-custom" circle @click="grant(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
          small
          layout="prev, pager, next"
          :current-page="this.page"
          :total="this.total"
          @current-change="handlePage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      checkboxGroup1: [],
      page: 1,
      total: 0,
      roleList: [
        {value: '111', label: '222'}
      ],
      roleUserList:[],
      roleValue: '',
      tableData: [
        {
          username: '2016-05-02',
          nickname: '王小虎',
          password: '13553',
          gender: '',
          phoneNumber: ''
        },
      ],
      ruleForm: {
        username: '这是在哪里',
        gender: '男',
        phoneNumber: '151313215125',
        password: '123456'
      },
      grantFormVisible: false,
      updateFormVisible: false,
      formLabelWidth: '180',
      insertFormVisible: false,
      rules: {
        username: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在4到15个字符之间', trigger: "blur"}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在4到15个字符之间', trigger: "blur"}
        ],

      }
    }
  },
  methods: {
    grant(user) {
      this.grantFormVisible = true
      this.listUserRole(user.id)
      console.log(user)
      console.log('授权'+user)
    },
    submitGrant(){
      this.grantFormVisible = false
      console.log(this.checkboxGroup1.length)
      console.log(this.checkboxGroup1)
      let roleList=[];
      this.checkboxGroup1.forEach((item)=>{
        roleList.push(item.id)
      })
      console.log(roleList)
      this.checkboxGroup1=[]
    },
    submitAddUser() {
      let url = 'http://localhost:9085/user/addUser'
      console.log(url)
      console.log(this.ruleForm)
      let data = this.qs.stringify(this.ruleForm)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, data).then(res => {
        let responseBody = res.data;
        if (responseBody.state != 20000) {
          this.$message.error(responseBody.message);
          return;
        }
        this.$message.success("添加成功");
        this.listUser();
      })
      this.insertFormVisible = false;
    },
    addUser() {
      this.roleList = '';
      this.listRole();
      this.insertFormVisible = true;
    },
    deleteUser(user) {
      if (!confirm("您确认删除吗")) {
        return;
      }
      let url = 'http://localhost:9085/user/delete/' + user.id;
      console.log(url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then(res => {
        let responseBody = res.data;
        if (responseBody.state != 20000) {
          this.$message.error(responseBody.message);
          return;
        }
        this.$message.success("删除成功");
        this.listUser();
      })
    },
    editUser(user) {
      this.updateFormVisible = true
      this.ruleForm = user
    },
    submitEditForm() {
      let url = 'http://localhost:9085/user/update/';
      console.log(url);
      let user = this.qs.stringify(this.ruleForm)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, user).then(res => {
        let responseBody = res.data;
        console.log(responseBody)
        this.tableData = responseBody.data;
      })
      this.updateFormVisible = false
      this.page = 1;
      this.pageUser(1);
    },

    pageUser(val) {
      let url = 'http://localhost:9085/admins/selectList/'
      console.log(val)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then(res => {
        let responseBody = res.data;
        this.tableData = responseBody.data;
        this.total = responseBody.data.total
      })
    },
    listUser() {
      this.page = 1;
      this.pageUser(1)
    },
    listRole() {
      let url = 'http://localhost:9085/roles'
      console.log(url)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then(res => {
        let responseBody = res.data;
        console.log(responseBody.data)
        this.roleList = responseBody.data;
      })
    },
    listUserRole(id) {
      let url = 'http://localhost:9085/userRole/select/'+id
      console.log(url)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then(res => {
        let responseBody = res.data;
        this.roleUserList = responseBody.data;
        console.log(this.roleUserList)
      })
    },
    handlePage(val) {
      this.page = val;
      this.pageUser(val);
    }
  },
  mounted() {
    this.listUser();
    this.listRole()
  }

}

</script>

<style scoped>

</style>
